<script setup lang="ts">
import { ref, reactive } from "vue";
import handleClipboard from "./utils/clipboard";
import { guestSave, findServiceNum } from "./api";
import { useUrlSearchParams } from "@vueuse/core";
import { showNotify } from "vant/es";
import { watch } from "vue";
import useExecOnce from "./utils/useExecOnce";
import { useLocale } from "./locales/useLocale";

const urlSearchParams = useUrlSearchParams<{
  channelNum: string;
  language: string;
}>("history");

const { t, locale } = useLocale(urlSearchParams.language);

const form = reactive<FormType>({
  name: "",
  phone: "",
  app: "",
  capital: "",
  time: "",
  nextAuto: false,
});

const show = ref(false);

const customerService = ref<
  {
    name: string;
    num: string;
  }[]
>([]);

const saveLoading = ref(false);

const dialogLoading = ref(false);

const execOnce = useExecOnce();

watch(show, (showVal) => {
  if (showVal) {
    execOnce(() => {
      dialogLoading.value = true;
      findServiceNum()
        .then((res) => {
          customerService.value = res.map((s) => {
            return {
              name: s.serviceName,
              num: s.serviceNum,
            };
          });
        })
        .finally(() => {
          dialogLoading.value = false;
        });
    });
  }
});

function openContactService() {
  show.value = true;
}

async function onSubmit() {
  saveLoading.value = true;
  await guestSave({
    channelNum: urlSearchParams.channelNum,
    guestName: form.name,
    guestPhone: form.phone,
    // obtainType:
    whatsApp: form.app,
    guestFund: form.capital,
    freeTime: form.time,
  }).finally(() => {
    saveLoading.value = false;
    show.value = true;
  });

  showNotify({
    type: "success",
    message: "领取成功",
  });
}

interface FormType {
  name: string;
  phone: string;
  app: string;
  capital: string;
  time: string;
  nextAuto: boolean;
}
</script>

<template>
  <div class="cbec-poster-page">
    <div class="c-p-p--top-img">
      <img v-if="locale === 'zh-CN'" src="./assets/1.png" alt=""/>
      <img v-else-if="locale === 'pt-pt'" src="./assets/1-pt.png" alt="" />
    </div>
    <div class="cbec-poster-page--form">
      <!--<div class="c-p-p&#45;&#45;form-title">{{ t("minorityWarn") }}</div>-->
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="form.name"
            name="name"
            :label="t('iptNameLabel')"
            :placeholder="t('iptNameTip')"
            label-align="top"
            :rules="[{ required: true, message: t('iptNameTip') }]"
          />
          <van-field
            v-model="form.phone"
            name="phone"
            :label="t('iptPhoneLabel')"
            :placeholder="t('iptPhoneTip')"
            label-align="top"
            :rules="[{ required: true, message: t('iptPhoneTip') }]"
          />
          <van-field
            v-model="form.app"
            name="app"
            :label="t('iptAppLabel')"
            :placeholder="t('iptAppTip')"
            label-align="top"
            :rules="[{ required: true, message: t('iptAppTip') }]"
          />

          <van-field
            name="capital"
            :label="t('iptCapitalLabel')"
            label-align="top"
            :rules="[{ required: true, message: t('iptCapitalTip') }]"
          >
            <template #input>
              <van-radio-group v-model="form.capital" direction="horizontal">
                <van-radio name="1K-10K">1K-10K</van-radio>
                <van-radio name="10K-20K">10K-20K</van-radio>
                <van-radio name="20K-50K">20K-50K</van-radio>
                <van-radio name="50K+">50K+<!--{{
                  t("option2000More")
                }}--></van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            class="no-border"
            name="capital"
            :label="t('optionTime')"
            label-align="top"
            :rules="[{ required: true, message: t('optionTimeTip') }]"
          >
            <template #input>
              <van-radio-group v-model="form.time" direction="horizontal">
                <van-radio name="2小时">2{{ t("hour") }}</van-radio>
                <van-radio name="2-4小时">2-4{{ t("hour") }}</van-radio>
                <van-radio name="4-8小时">4-8{{ t("hour") }}</van-radio>
                <van-radio name="全天都有空">{{ t("freeAllDay") }}</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <!--<van-field class="agree">
            <template #input>
              <van-checkbox v-model="form.nextAuto"
                >{{ t("autoFillReadAgree") }}
                <a href="">《{{ t("powerOfAttorney") }}》</a></van-checkbox
              >
            </template>
          </van-field>-->
        </van-cell-group>
        <div class="c-p-p--form-submit">
          <van-button
            round
            type="primary"
            native-type="submit"
            :loading="saveLoading"
          >
            {{ t("agreeGet") }}
          </van-button>
        </div>
      </van-form>
    </div>

    <div class="c-p-p--mid-img">
      <img v-if="locale === 'zh-CN'" src="./assets/2.png" alt="" />
      <img v-else-if="locale === 'pt-pt'" src="./assets/2-pt.png" alt="" />
    </div>

    <footer class="cbec-poster-page--footer">
      <!--<div class="c-p-p-f&#45;&#45;title">{{ t("elementaryEducation") }}</div>-->
      <div class="c-p-p-f&#45;&#45;support">
        <!--{{ t("technicalServiceDes") }} |
        <a href="">{{ t("infringementComplaints") }}</a>-->
      </div>

      <div class="c-p-p-f--help" @click="openContactService">
        <van-icon name="service" />
        {{ t("contactService") }}
      </div>
      <div class="c-p-p-f&#45;&#45;copyright">
        <!--{{ t("company") }} | <a href="">《{{ t("pInfoProDeclaration") }}》</a>-->
      </div>
    </footer>
  </div>
  <van-dialog v-model:show="show" :title="t('contactService')" :confirmButtonText="t('confirm')">
    <div class="contact-service-dialog--content">
      <van-loading v-if="dialogLoading" />

      <div v-else class="c-s-d-c--content">
        <div
          class="c-s-d-c--item"
          v-for="(s, k) of customerService"
          :key="k"
          @click="handleClipboard(s.num,$event)"
        >
          <span class="c-s-d-c--name"> {{ s.name }}： </span>
          <span class="c-s-d-c--num">
            {{ s.num }}
          </span>
          <span class="c-s-d-c--icon">
            <IconMaterialSymbolsContentCopy />
          </span>
        </div>
      </div>

      <!-- <van-icon name="records" /> -->
    </div>
  </van-dialog>

  <!-- <van-overlay :show="pageLoading" class="page-loading">
    <van-loading />
  </van-overlay> -->
</template>

<style>
:root {
  --van-primary-color: #368bd0;
  /* --van-button-primary-background: #368bd0;
  --van-button-primary-border-color:#368bd0; */
}
</style>
